<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="../bootstrap3/jquery-1.8.3.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="../css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="../css/webindex.css"/>
    <link rel="stylesheet" type="text/css" href="../css/footer.css"/>
    <link rel="stylesheet" type="text/css" href="../css/top.css"/>
    <script src="../js/menu.js" type="text/javascript" charset="utf-8"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-form form_across" style="padding-top: 10px;padding-left: 15px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">ID：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsId" id="goodsId" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsName" id="goodsName" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" id="searchBtn">
                查询
            </button>
        </div>

        <div class="layui-inline">
            <button class="layui-btn layui-btn-primary" id="clearBtn">
                重置
            </button>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" id="addGoodsBtn">
                添加
            </button>
        </div>

        <div class="layui-inline" style="float: right; padding-right: 80px">
            <button class="layui-btn" id="backToIndex">
                返回主页
            </button>
        </div>
    </div>
</div>

<table class="layui-hide" id="showGoods" lay-filter="showGoods"></table>


<script src="../layui/layui.js" charset="utf-8"></script>

<script type="text/html" id="table_toolbar">
    <span>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="maintain">维护</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </span>
</script>

<!--<script type="text/html" id="table_toolbar_2">-->
<!--    <span>-->
<!--        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="maintain">维护</a>-->
<!--        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>-->
<!--    </span>-->
<!--</script>-->

<script type="text/javascript">
    layui.use('table', function () {
        var table = layui.table;

        tableInit();

        function tableInit(goodsId, goodsName) {
            //获取用户类型
            var userType;
            var tool_bar = $("#table_toolbar");

            $.ajax({
                url: "/user/showName",
                type: "GET",
                dataType: "JSON",
                async: false,
                success: function (json) {
                    userType = json.userType;
                }
            });

            // if (userType === 2) {
            //     tool_bar = "#table_toolbar_2";
            // } else {
            //     tool_bar = "#table_toolbar"
            // }

            table.render({
                elem: '#showGoods',
                url: '/product/selectByProduction',
                where: {
                    id: goodsId,
                    title: goodsName
                },
                cols: [[
                    {field: 'id', width: "10%", title: 'ID', sort: true},
                    {
                        field: "thumbnail",
                        align: "center",
                        width: "15%",
                        title: "缩略图",
                        templet: '<div><img src={{d.thumbnail}}></div>',
                        style: 'width:80px;height=:80px;'
                    },
                    {field: 'itemType', width: "12%", title: '物品类型'},
                    {field: 'title', width: "40%", title: '标题',},
                    {field: 'num', width: "8%", title: '数量'},
                    {field: "", align: "center", width: "15%", title: "操作", toolbar: tool_bar}
                ]],
                page: true,
                limit: 20,
                limits: [20, 30, 50],
                text: {
                    none: '暂无相关数据'
                }
            });
        }

        //点击查询按钮
        $('#searchBtn').click(function () {
            let goodsId = $("#goodsId").val().trim();
            let goodsName = $("#goodsName").val().trim();
            if (goodsId !== "" && !(/(^[1-9]\d*$)/.test(goodsId))) {
                layer.msg("商品id应该为正整数！");
                return;
            }
            if (goodsId === "") {
                goodsId = undefined;
            }
            if (goodsName === "") {
                goodsName = undefined;
            }
            tableInit(goodsId, goodsName);
        });

        //清空
        $('#clearBtn').click(function () {
            $("#goodsId").val("");
            $("#goodsName").val("");
        });

        //新建
        $("#addGoodsBtn").click(function () {
            location.href = 'addGoods.html';
        });

        //返回主页
        $("#backToIndex").click(function () {
            location.href = 'maintainChoice.html';
        });

        //点击 操作栏
        table.on('tool(showGoods)', function (obj) {
            let event = obj.event;
            var data = obj.data;
            let id = data.id;//模板id
            if (event === "maintain") {//编辑
                location.href = 'updateGoods.html?pid=' + id;
            }
            if (event === "delete") {
                $.ajax({
                    url: "/product/deleteById/" + id,
                    type: "GET",
                    dataType: "JSON",
                    success: function (json) {
                        if (json.code == 0) {
                            alert("删除成功");
                            location.href = "queryGoods.html";
                        } else {
                            alert("删除失败");
                        }
                    }
                });
            }
        });
    });
</script>

</body>
</html>
